Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: #580 Create ModalCommandPalette #646

Merged
merged 6 commits into from
Jan 8, 2024

Conversation

mattburnett-repo
Copy link
Collaborator

Contributor checklist


Description

This PR addresses Issue #580. It creates a baseline for the component as described in the original issue.

It is only tested on MacOS.

There are some TODO tasks:
│ │ └─ ModalCommandPalette.vue
│ │ ├─ line 18: TODO : Input area is much smaller that tag width.
│ │ ├─ line 37: TODO : Sort out router-link target routes (the to="..." things).
│ │ └─ line 170: TODO : Maybe there is a better / more future-proof solution than userAgent?

Related issue

Copy link

netlify bot commented Jan 6, 2024

Deploy Preview for activist-org ready!

Name Link
🔨 Latest commit be75186
🔍 Latest deploy log https://app.netlify.com/sites/activist-org/deploys/659b48b266116000087ebb83
😎 Deploy Preview https://deploy-preview-646--activist-org.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

github-actions bot commented Jan 6, 2024

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. It'd be great to have you!

Maintainer checklist

  • The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

    • The contributor's name and icon in remote commits should be the same as what appears in the PR
    • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo
  • The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

  • The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

@andrewtavis andrewtavis self-requested a review January 6, 2024 15:47
@andrewtavis
Copy link
Member

Thanks @mattburnett-repo! Do you want to check the errors reported above, or should I get to them?

@andrewtavis
Copy link
Member

Error: 19:13 error The element inside <transition> is expected to have a v-if or v-show directive vue/require-toggle-inside-transition

I'd be happy to do the i18n ones on review :)

@mattburnett-repo
Copy link
Collaborator Author

I made the errors. I'll fix them. Should have another commit / PR in maybe an hour.

@mattburnett-repo
Copy link
Collaborator Author

fixed the i18n errors in the ModalCommandPalette code.

the remaining i18n_check error involves code outside of the code for ModalCommandPalette. could you fix that one, please?

},
});

whenever(slash, () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick thing that I'm realizing here @mattburnett-repo is that I didn't do a good job of explaining that slash should maintain its old functionality for this :)

Ultimately activist will have two kinds of search: the slash one that's from the search bar that searches within the current domain for events or organizations or anything if we're not within a sub domain, and then the command palette that should only be triggered by meta_k or ctrl_k.

Would it be possible to:

  • Remove the slash functionality from this
  • Uncomment those lines in the search bar to show the command palette shortcut indicators

I'll then go through and do some styling. After that we should be good!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries @andrewtavis . We had earlier some discussion about overall CommandPalette functionality and I probably got confused during that discussion.

I've implemented your suggestions and they will appear in the next PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking forward to checking out the finalized version later, @mattburnett-repo! Thanks for the quick reaction :) :)

import { useMagicKeys, whenever } from "@vueuse/core";

// TODO: Maybe there is a better / more future-proof solution than userAgent?
const isMacOS = /Mac/.test(navigator.userAgent);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use the device check module as is done here 😊 These are also the lines we want to be uncommented :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is as good of a solution as I could think of, and would be fine for now until we realize that it has major drawbacks.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it. The $device.isMacOS (from the template example) doesn't work in a script block. It took me a minute, but I figured out to use useDevice().

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Great to hear, @mattburnett-repo!

@andrewtavis
Copy link
Member

Note to self, do not do Headwind formatting for the Tailwind classes while reviewing as it'll cause crazy merge conflicts 😅

Copy link
Member

@andrewtavis andrewtavis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First version is done, @mattburnett-repo! This is really amazing stuff here 😊 There are still some minor things to do that I'll mention in the issue, but I think we're good to merge this in :)

@andrewtavis andrewtavis merged commit f98492c into activist-org:main Jan 8, 2024
6 checks passed
@mattburnett-repo mattburnett-repo deleted the 580 branch July 4, 2024 22:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants